<div class="wrapper-bz-page">
    <div class="wrapper-bz-body">
        <div class="column-block block-left" style="width:300px;">
            <div class="column-title">页面</div>
            <div class="column-content">
                <div class="column-filter">

                </div>
                <div class="column-datagrid">
                    <table id="table_clockin_activity_in_calendar" style="width:100%;height:100%"></table>
                </div>
            </div>
        </div>
        <div class="column-block block-right" style="left:310px;">
            <div class="column-title">打卡活动计划安排</div>
            <div class="column-content">
                <div class="column-filter">

                </div>
                <div class="column-datagrid">
                    <div id="table_poem_activity_plan_calendar"  style="width:100%;height:100%"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="dialog_add_clockin_activity_in_calendar"></div>
<div id="dialog_edit_clockin_activity_in_calendar"></div>
<div id="dialog_add_page_column"></div>
<div id="dialog_edit_page_column"></div>
<script>
    $(function(){
        var subject_1 = "clockin_activity_in_calendar";
        var subject_2 = "poem_activity_plan_calendar";
        //列表-对话框-表单
        var tableId_1 = '#table_' + subject_1;
        var tableId_2 = '#table_' + subject_2;

        var tableObject_1 = $(tableId_1);
        var tableObject_2 = $(tableId_2);
        var addDialogId_2 = '#dialog_add_' + subject_2;
        var editDialogId_2 = '#dialog_edit_' + subject_2;
        var addFormId_2 = '#form_add_' + subject_2;
        var editFormId_2 = '#form_edit_' + subject_2;

        var paramDataAdd_2 = {};
        var paramDataEdit_2 = {};

        var selectLeftMainId = 0;
        var configDialogAdd_2 = {
            href:'/admin/PageColumn/pageAdd',
            title:'新增页面纵列',
            queryParams:{},
            width:dialogTwoColumnWidth,
            height:dialogDefaultHeight,
            modal:true,
            buttons:[{
                text:'<i class="fa fa-check fa-btn-cls" style="color:green"></i>保存',
                plain:true,
                handler:function(){
                    paramDataAdd_2 = $(addFormId_2).serializeObject();
                    paramDataAdd_2 = $.extend(paramDataAdd_2, {page_id:selectLeftMainId});
                    console.log(paramDataAdd_2);
                    if(!paramDataAdd_2.column_name){
                        layer.msg("请填写列标识码");
                        return ;
                    }
                    if(!paramDataAdd_2.column_title){
                        layer.msg("请填写列名");
                        return ;
                    }
                    var loading = layer.load(1, {
                        shade: [0.1,'#fff'] //0.1透明度的白色背景
                    });
                    $.ajax({
                        url: '/api/PageColumn/createPageColumn',
                        async: false,
                        dataType:'json',
                        type:'post',
                        data:paramDataAdd_2,
                        success:function(resp){
                            layer.close(loading);
                            if( 1 == resp.code ){
                                $(addDialogId_2).dialog('close');
                                $(tableId_2).datagrid('reload');
                            }else{
                                layer.msg(resp.message);
                            }
                        }
                    });
                }
            },{
                text:'<i class="fa fa-times fa-btn-cls" style="color:red"></i>取消',
                plain:true,
                handler:function(){
                    $(editDialogId).dialog('close');
                }
            }]
        };
        var configDialogEdit = {
            href:'role/edit',
            title:'修改角色',
            queryParams:{},
            width:dialogDefaultWidth,
            height:dialogDefaultHeight,
            modal:true,
            buttons:[{
                text:'<i class="fa fa-check fa-btn-cls" style="color:green"></i>保存',
                plain:true,
                handler:function(){
                    paramDataEdit = $(editFormId).serializeObject();
                    console.log(paramDataEdit);
                    if(!paramDataEdit.role_name){
                        layer.msg("请填写角色名称");
                        return ;
                    }
                    var loading = layer.load(1, {
                        shade: [0.1,'#fff'] //0.1透明度的白色背景
                    });
                    $.ajax({
                        url: '/api/role/edit',
                        async: false,
                        dataType:'json',
                        type:'post',
                        data:paramDataEdit,
                        success:function(resp){
                            layer.close(loading);
                            if( 1 == resp.code ){
                                $(editDialogId).dialog('close');
                                $(tableId).datagrid('reload');
                            }else{
                                layer.msg(resp.message);
                            }
                        }
                    });
                }
            },{
                text:'<i class="fa fa-times fa-btn-cls" style="color:red"></i>取消',
                plain:true,
                handler:function(){
                    $(editDialogId).dialog('close');
                }
            }]
        };

        var configDatagrid_1 = {
            url:'/api/ClockinActivity/getRecentClockinActivityList',
            method: 'post',
            remoteSort:false,
            queryParams:{},
            pageList:[30,50,100],
            pageSize:30,
            pagination:false,
            clickToEdit:false,
            dblclickToEdit:false,
            singleSelect:true,
            checkOnSelect:true,
            selectOnCheck:true,
            rownumbers:false,
            striped:true,
            fitColumns:true,
            fit:true,
            frozenColumns:[[
                {field:'ck',title:'ck',checkbox:true},
            ]],
            columns:[[
                {field:'id',title:'ID',width:40,hidden:true},
                {field:'activity_name',title:'活动名称',width:100},
                // {field:'clockin_person_num',title:'打卡人数',width:100},
                // {field:'step_status',title:'进行状态',width:100},
            ]],
            loadFilter: function(data){
                return loadFilter(data, false);
            },
            onSelect: function(index, row){
                console.log("enter select row");
                selectLeftMainId = row.id;
                var nowDate = new Date();
                var nowFormatDate = nowDate.getFullYear()+"-"+(nowDate.getMonth()+1)+"-"+nowDate.getDate();
                dataActivityPlanByMonth = getClockinActivityPlanByMonth(row.id, nowFormatDate);
                tableObject_2.calendar(calendarConfig);
            },
            onClickRow: function(index, row){
                console.log("enter click row");
                selectLeftMainId = row.id;
                configDatagrid_2.queryParams = {page_id:row.id};
                tableObject_2.datagrid(configDatagrid_2);
            },
            onCheck: function(index, row){
            },
            onUncheck: function(index, row){
            },
            rowStyler: function(index, row){
                if(row.role_user_id > 0 && selectRoleId > 0){
                    return 'background:#c6e9ff';
                }
            },
            onLoadSuccess: function(){
                tableObject_1.datagrid('selectRow', 0);
                $(".datagrid-header-check").html("");
            },
            toolbar:[
                {
                    text:'<i class="fa fa-refresh tool-button-refresh"></i> 刷新',
                    plain:true,
                    handler:function(){
                        tableObject_1.datagrid('reload');
                    }
                }
            ]

        };
        var calendarConfig = {
            formatter: function(date){
                var showText = "";
                showText += '<div class="calendar-cell-day">' + date.getDate() + '</div>'
                $.each(dataActivityPlanByMonth, function(index, item){
                    var tempDate = new Date(index);
                    console.log("date:" + date.getDate());
                    console.log("temp:" + tempDate.getDate());
                    if(tempDate.getDate() == date.getDate() && tempDate.getMonth() == date.getMonth()){
                        console.log("title:" + item.title);
                        showText += item.title + '<br><span style="font-size:12px;">' + item.dynasty + '.' + item.poet + '</span>';
                        return ;
                    }
                });
                return showText;
            },
            styler: function(date){

            },
            onSelect: function(date){
                var formatDate = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
                console.log(formatDate);
                if(!selectLeftMainId){
                    layer.msg("请先指定打卡活动");
                    return ;
                }
                configDialogAdd_2.queryParams = {plan_date:formatDate, activity_group_id:activityGroupId};
                $(addDialogId_2).dialog(configDialogAdd_2);
            }
        };
        tableObject_1.datagrid(configDatagrid_1);

        // SearchCombobox('search_input_user_in_role','table_user_in_role',function (val,name) {
        //     configDatagrid_1.queryParams = {};
        //     configDatagrid_1.queryParams[name] = val;
        //     if(selectRoleId){
        //         configDatagrid_1.queryParams['role_id'] = selectRoleId;
        //     }
        //     tableObject_1.datagrid(configDatagrid_1);
        // },['ck','ID']);

        function getCheckedRowData(opText){
            var checkList = tableObject.datagrid('getChecked');
            if(checkList.length < 1){
                layer.msg('请选择要'+ opText +'的数据');
                return false;
            }
            return checkList;
        }

        function getCheckedRowData_1(opText){
            var checkList = tableObject_1.datagrid('getChecked');
            if(checkList.length < 1){
                layer.msg('请选择要'+ opText +'的数据');
                return false;
            }
            return checkList;
        }

        function getClockinActivityPlanByMonth(clockinActivityId, planMonth)
        {
            var optionData = [];
            $.ajax({
                url: '/api/ClockinActivityPlan/getClockinActivityPlanListByMonth',
                async: false,
                type:'post',
                data:{clockin_activity_id: clockinActivityId, plan_month:planMonth},
                success:function(resp){
                    if( 1 == resp.code ){
                        optionData = resp.data;
                    }
                }
            });
            return optionData;
        }

    });


</script>
